<template>
  <view class="couponCard">
    <view :class="`content ${cardtype}`">
      <view class="hole-card">
        <!-- <slot></slot>
222 -->
        <!-- <view class="top-left" style="display: grid">
            <view
              ><text>{{ district }}</text></view
            >
            <view
              ><text>{{ data.coupon_value }}</text
              >元</view
            >
          </view> -->
        <!-- disabled  -->
        <view class="cover-down">
          <view class="hole-down" @tap="toDetali">
            <view class="couponCard-top" style="">
              <view class="couponCard-top-left" style="display: grid">
                <!-- [Taro3] 深层嵌套到第15层需要重启组件时碰到 Text 导致重启失败子节点丢失 -->
                <view class="firstview"
                  ><view><text class="tag">指定商圈可用</text></view></view
                >
                <view class="lastview"
                  ><view
                    ><text class="money">{{ data.coupon_value }}</text
                    >元</view
                  ></view
                >
              </view>

              <view class="info">
                <view class="info-title">{{ data.note }}</view>
                <view class="info-category"
                  >{{ data.shopping_district.name }}可用</view
                >
                <view class="info-time">
                  {{ format(data.valid_start_dtt) }}——{{
                    format(data.valid_end_dtt)
                  }}
                </view>
              </view>
              <!-- valid_start_dtt -->
              <view class="couponCard-top-right">
                <view style="state">{{ text }}</view>
              </view>
            </view>
            <!-- <image :src="data.imgurl" alt="" srcset="" class="img" />
            <view class="info">
              <view class="info-title"
                ><text>{{ data.title }}</text></view
              >
              <text class="info-category">{{ data.category }}</text>
              <view class="info-time">{{ data.title }}</view>
            </view> -->
          </view>
        </view>
        <view class="cover-up">
          <view class="hole-up">
            <view class="couponCard-buttom">
              到店支付专享。
              <view class="couponCard-buttom-right"> </view>
            </view>
          </view>
        </view>

        <!-- <view class="cover-up">
          <view class="hole-up"> DEMO </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import "./index.scss";
import Taro from "@tarojs/taro";
import formatTime from "../../utils/formatTime";

export default {
  components: {},
  props: ["type", "data"],
  data() {
    return {
      // consumerbg:consumerbg,
    };
  },
  computed: {
    // 计算属性的 getter
    district: function () {
      // `this` 指向 vm 实例
      return this.data.shopping_district.name
        ? `${this.data.shopping_district.name}专用`
        : "通用";
    },
    text: function () {
      // `this` 指向 vm 实例

      if (this.type == "invalid") {
        return "失效券";
      }
      if (this.type == "used") {
        return "已使用";
      }
      if (this.type == "unused") {
        return "立即使用";
      }
      if (this.type == "special") {
        return "special";
      }
      return "";
    },
    cardtype: function () {
      // `this` 指向 vm 实例

      if (this.type == "invalid" || this.type == "used") {
        return "";
      }
      if (this.type == "unused") {
        switch (this.data.coupon_valu) {
          case 50: {
            return "red";
            break;
          }

          case 30: {
            return "yellow";
            break;
          }
          case 20: {
            return "orange";
            break;
          }

          default:
            return "red";
        }
      }
      // orange
      return "red";
    },
  },
  mounted() {
    console.log(this.data, "type");
  },
  methods: {
    format(time) {
      // return()
      return formatTime(time, "yyyy-mm-dd");
    },
    toDetali() {
      Taro.navigateTo({
        url: `/pages/person/coupondetail/index?id=${this.data._id}`,
      });
    },
  },
};
</script>

<style>
</style>